<template>
	<view class="h100">
		<my-scroll class="h100 p-10" @scrolltolower="scrolltolower" backTop>
			<template v-for="(item,i) in list">
				<view class="item" @click="imgFn(item,i)">
					<view class="flex">
						<up-text :text="item.设备名称" size="16" color="#333333" />
						<up-tag :text="`${item.告警等级}级`" plain shape="circle" size="mini" v-if="item.告警等级" />
					</view>
					<template v-for="(item2,i) in [{title:'告警分类',key:'告警分类' },{title:'告警时间',key:'告警时间'}]" :key="i">
						<view class="flex m-y-4">
							<view class="flex s-center">
								<up-text :text="`${item2.title}：`" color="#525866" size="14" />
							</view>
							<up-text :text="item[item2.key]" :lines="1" color="#7F899F" size="14" />
						</view>
					</template>
				</view>
			</template>
		</my-scroll>
		<up-modal :show="imgShow" @confirm="imgShow = false" @close="imgShow = false" :closeOnClickOverlay="true">
			<view class="w100 image">
				<image :src="imgSrc" mode="widthFix" style="width: 100%;" />
				<!-- 				<img :src="imgSrc" alt="" srcset="" style="height: 200px;width: 100%;" /> -->
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	/**************************************请求数据*************************************************/
	import {
		getByApiCode
	} from "@/api/customApi";

	let list = ref([]),
		pageIndex = 1,
		total = 0;

	function fn() {
		getByApiCode({
			pageIndex,
			pageSize: 20,
			total: true,
			apiCode: "driverWarnInfoDetail",
			propertyMapping: {
				"告警类型": "alertType",
				"设备名称": "DEVICE_CODE",
				"告警分类": "WARNING_TYPE",
				"告警等级": "ALERT_LEVEL",
				"抓拍图片": "PICTURE",
				"告警时间": "ALERT_START_TIME"
			},
		}).then(res => {
			list.value.push(...res.data);
			total = res.total
		})
	}
	fn()
	// 滚动到底部加载数据
	function scrolltolower() {
		if (list.value.length <= total) {
			pageIndex++;
			fn()
		}
	}

	const imgShow = ref(false),
		imgSrc = ref('');

	function imgFn(data) {
		if (data.抓拍图片) {
			imgSrc.value = data.抓拍图片
			// .replace('ftp://172.41.90.84:16777', 'http://117.191.103.69:39400/gaojingPic').replace(
			// 	';', '');
			imgShow.value = true;
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 10px;
		background: #fff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		+.item {
			margin-top: 10px;
		}
	}

	:deep() {
		.u-modal__content {
			box-sizing: border-box;
		}

		.u-modal__content {
			font-size: 0;
			padding: 10px !important;
		}

		.image {
			border: 1px solid rgb(214, 215, 217);
			border-radius: 4px !important;
		}
	}
</style>